<template>
  <div class="basic-form">
    <div class="page-header">
      <span class="page-header-title"> 基础表单 </span>
      <div class="page-header-container">
        表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。
      </div>
    </div>

    <el-card class="content-card">
      <el-row>
        <el-col
          :sm="{ span: 20, offset: 2 }"
          :md="{ span: 16, offset: 4 }"
          :xl="{ span: 12, offset: 6 }"
        >
          <ProForm
            class="full-form"
            v-model="ruleForm"
            :rules="rules"
            grid
            :autoFocusFirstInput="true"
            :columns="columns"
            @submit="submitForm"
            status-icon
            label-width="100px"
            :label-position="labelPosition"
          >
            <template #footer="{ handleReset, handleSubmit }">
              <el-form-item>
                <el-button @click="handleReset"> 重置 </el-button>
                <el-button type="primary" @click="handleSubmit"> 提交 </el-button>
              </el-form-item>
            </template>

            <!--      下面已使用渲染函数了      -->
            <!--            <template #participants-option="{ src, label }">
              <div class="dropdown-item">
                <el-avatar :src="src" :size="22" class="avatar" />
                <span>{{ label }}</span>
              </div>
            </template>-->
          </ProForm>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="jsx">
import { reactive, ref } from 'vue'
import { useResponsive } from '@/hooks/use-responsive'
import { breakpointQueryMap } from '@/utils/media-query-listener'
import { getAssetsImage } from '@/utils/util'
import { ProForm } from '@/components/form/index.js'

defineOptions({
  name: 'BasicForm', //不命名组件，keep-alive的include不属性生效
})
const labelPosition = ref('right')
const ruleForm = reactive({
  title: '',
  content: '',
  date: '',
  position: '',
  desc: '',
  record: '1',
  participants: [],
})
const rules = reactive({
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
  date: [
    {
      type: 'array',
      required: true,
      message: '请选择起止日期',
      fields: {
        0: { type: 'date', required: true, message: '请选择开始日期' },
        1: { type: 'date', required: true, message: '请选择结束日期' },
      },
    },
  ],
  position: [
    {
      required: true,
      message: '请选择会议地点',
      trigger: 'change',
    },
  ],
})

const positionOptions = [
  {
    value: '一号会议室',
    label: '一号会议室',
  },
  {
    value: '二号会议室',
    label: '二号会议室',
  },
  {
    value: '三号会议室',
    label: '三号会议室',
  },
  {
    value: '四号会议室',
    label: '四号会议室',
  },
]
const userOptions = [
  {
    value: '张三',
    label: '张三',
    src: getAssetsImage('people2.jpg'),
  },
  {
    value: '王五',
    label: '王五',
    src: getAssetsImage('people6.webp'),
  },
  {
    value: '李四',
    label: '李四',
    src: getAssetsImage('people3.jpg'),
  },
  {
    value: '小明',
    label: '小明',
    src: getAssetsImage('people4.jpg'),
  },
  {
    value: '小红',
    label: '小红',
    src: getAssetsImage('people5.webp'),
  },
]

const columns = reactive([
  {
    label: '会议标题：',
    prop: 'title',
    formValueProps: {
      valueType: 'el-input',
      props: {
        placeholder: '请输入标题',
        clearable: true,
      },
    },
  },
  {
    label: '会议内容：',
    prop: 'content',
    formValueProps: {
      valueType: 'el-input',
      props: {
        placeholder: '请输入内容',
        clearable: true,
      },
    },
  },
  {
    label: '起止日期：',
    prop: 'date',
    formValueProps: {
      valueType: 'el-date-picker',
      props: {
        type: 'daterange',
        'range-separator': '至',
        'start-placeholder': '开始日期',
        'end-placeholder': '结束日期',
        clearable: true,
      },
    },
  },
  {
    label: '会议地点：',
    prop: 'position',
    formValueProps: {
      valueType: 'el-select-v2',
      props: {
        placeholder: '请选择会议地点',
        clearable: true,
        options: positionOptions,
      },
    },
  },
  {
    label: '参会人：',
    prop: 'participants',
    formValueProps: {
      valueType: 'el-select',
      options: userOptions,
      optionsSlots: {
        default: (option) => {
          return (
            <div class="dropdown-item">
              <el-avatar src={option.src} size={22} class="avatar" />
              <span>{option.label}</span>
            </div>
          )
        },
        //  default: 'participants-option',
      },
      props: {
        multiple: true,
        placeholder: '请选择参会人员',
        'popper-class': 'participants-popper',
        clearable: true,
      },
    },
  },
  {
    label: '会议记录：',
    prop: 'record',
    formValueProps: {
      valueType: 'el-radio-group',
      options: [
        {
          label: '记录',
          value: '1',
        },
        {
          label: '不记录',
          value: '0',
        },
      ],
    },
  },
  {
    label: '描述：',
    prop: 'desc',
    formValueProps: {
      valueType: 'el-input',
      props: {
        type: 'textarea',
        placeholder: '请输入描述',
      },
    },
  },
])

useResponsive(
  (matches) => {
    labelPosition.value = matches === true ? 'top' : 'right'
  },
  { query: breakpointQueryMap.xs },
)

const submitForm = async (value) => {
  console.log('提交', value)
}
</script>

<style scoped lang="scss">
.basic-form {
  .content-card {
    :deep(.el-form) {
      margin-top: 8px;
      .el-form-item {
        margin-bottom: 24px;
      }
    }
  }
}
</style>
<style lang="scss">
.participants-popper {
  .el-select-dropdown__item {
    padding-left: 14px;
  }
  .dropdown-item {
    display: flex;
    align-items: center;
    .avatar {
      margin-right: 12px;
    }
  }
}
</style>
